<template>
	<div class="layout-pd">
		<zh-header-toolbar>
			<zh-button v-if="activeName === 'baseInfo'" buttonType="add" @click="routerAdd">同级新增</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" buttonType="add" @click="childRouterAdd">子级新增</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" buttonType="save" @click="saveRouter">保存</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" buttonType="del" @click="deleteRouter">删除</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" icon="ele-Refresh" type="warning" @click="clearRouterCache">清除缓存</zh-button>
			<zh-button v-if="activeName === 'roleList'" buttonType="add" @click="addRole">添加到角色</zh-button>
			<zh-button v-if="activeName === 'roleList'" buttonType="del" @click="deleteRole">角色中删除</zh-button>
			<zh-button v-if="activeName === 'userList'" buttonType="add" @click="addUser">授权到用户</zh-button>
			<zh-button v-if="activeName === 'userList'" buttonType="del" @click="deleteUser">解除用户授权</zh-button>
		</zh-header-toolbar>
		<zh-row>
			<zh-col :span="6">
				<zh-card shadow="hover" mode="default" title="菜单树">
					<template #header>
						<zh-row>
							<zh-col :span="2" style="color: var(--el-color-primary)">
								<div style="line-height: 60px; height: 60px">
									<SvgIcon name="ele-Menu" :size="24" />
								</div>
							</zh-col>
							<zh-col :span="22">
								<zh-select
									:lazy="true"
									placeholder="请选择所属应用"
									:allowClear="false"
									v-model="treeQueryParams.appId"
									:fieldNames="{ label: 'appName', value: 'appId' }"
									funcCode="application0012"
									searchField="appName"
									:searchParams="{type: '2',authStatus: '1',status: '1'}"
									@change="appChange"
								></zh-select>
							</zh-col>
						</zh-row>
					</template>
					<div>
						<zh-tree
							ref="appmenuTreeRef"
							:queryParam="treeQueryParams"
							funcCode="appmenu0008"
							moveFuncCode="appmenu0012"
							:expand-on-click-node="false"
							node-key="key"
							:height="isTagsview ? `calc(100vh - 142px)` : `calc(100vh - 108px)`"
							:draggable="true"
							:props="{ label: 'title' }"
							@node-click="onNodeClick"
						></zh-tree>
					</div>
				</zh-card>
			</zh-col>
			<zh-col :span="18">
				<zh-card shadow="hover">
					<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
						<el-tab-pane label="基础信息" name="baseInfo"> <AppMenuInfo ref="appmenuFormRef" :appmenuInfo="appmenuInfo" /></el-tab-pane>
						<el-tab-pane label="角色权限列表" name="roleList">
							<RoleModule ref="appmenuRoleFormRef" :id="appmenuInfo.menuId" type="menu" />
						</el-tab-pane>

						<el-tab-pane label="用户权限列表" name="userList">
							<UserModule ref="appmenuUserFormRef" title="路由关联用户" :id="appmenuInfo.menuId" type="menu" />
						</el-tab-pane>
					</el-tabs>
				</zh-card>
			</zh-col>
		</zh-row>
	</div>
</template>
<script lang="ts" setup name="routerManager">
import type { TabsPaneContext } from 'element-plus';
import AppMenuInfo from './component/appMenuInfo.vue';
import RouterFunctionForm from './component/RouterFunctionForm.vue';
import UserModule from '@/views/system/component/UserModule.vue';
import RoleModule from '@/views/system/component/RoleModule.vue';
import { ElMessage } from 'element-plus';
const VITE_APP_ID = import.meta.env.VITE_APP_ID as string;
//----------------定义子组件 begin------------------------------
const appmenuFormRef = ref();
const appmenuUserFormRef = ref();
const appmenuTreeRef = ref();
const appmenuRoleFormRef = ref();
const routerFunctionFormRef = ref();
//-----------------获取缓存参数-----------------------------
const { isTagsview } = storeToRefs($store.theme);
//---------------------内部变量定义 begin--------------------------------------
const activeName = ref('baseInfo');
const selectNode: any = ref(null);
const treeQueryParams: any = ref({ appId: VITE_APP_ID });

const appmenuInfo = ref({ menuId: '', parentId: null, orderNo: null, parentTitle: null, rate: null, linkPath: '', appId: VITE_APP_ID });
const saveType = ref('first');
//---------------------内部变量定义 end--------------------------------------

//---------------------定义调用方法--------------------------------------
const handleClick = (tab: TabsPaneContext, event: Event) => {
	if (!selectNode.value) {
		ElMessage({
			message: '请先在左边路由树中选择需要操作的节点',
			type: 'warning',
		});
		return;
	}
	changeActiveName();
};
const onNodeClick = (node) => {
	//点击树节点触发事件
	selectNode.value = node;
	appmenuInfo.value.menuId = node.key;
	//console.log("appmenuInfo.value.menuId",appmenuInfo.value.menuId)
	saveType.value = 'edit';
	changeActiveName();
};
//改变tab调用方法
const changeActiveName = () => {};
const appChange = () => {
	appmenuTreeRef.value.query();
	selectNode.value = null;
	saveType.value = 'first';
	appmenuInfo.value = { menuId: '', parentId: null, orderNo: null, parentTitle: null, rate: null, linkPath: '', appId: treeQueryParams.value.appId };
};
const saveRouter = async () => {
	//保存路由信息
	let res = await appmenuFormRef.value.saveForm();
	if (res && res.code === 0) {
		let result = res.result;
		//保存成功
		if (res.saveType === 'add') {
			//新增树节点
			let isLeaf = true;
			if (result.nodeType === '0') {
				isLeaf = false;
			} else {
				isLeaf = true;
			}
			const addNode = {
				key: result.menuId,
				title: result.title,
				icon: result.icon,
				nodeType: result.nodeType,
				isLeaf: isLeaf,
				parentKey: result.parentId,
			};
			if (saveType.value === 'childAdd') {
				//子集新增
				appmenuTreeRef.value.append(addNode, selectNode.value.key);
			} else if (saveType.value === 'first') {
				//更新树节点信息
				appmenuTreeRef.value.query();
			} else {
				//同级新增
				appmenuTreeRef.value.insertBefore(addNode, selectNode.value.key);
			}
			ElMessage.success('新增成功！');
		} else if (res.saveType === 'edit') {
			//更新树节点信息
			selectNode.value.title = result.title;
			selectNode.value.icon = result.icon;
			selectNode.value.nodeType = result.nodeType;

			ElMessage.success('修改成功！');
		}
	}
};
const routerAdd = async () => {
	//同级新增
	if (selectNode.value) {
		saveType.value = 'add';
		let oldRouter = appmenuFormRef.value.selectRouter;
		appmenuInfo.value = {
			parentId: oldRouter.parentId,
			linkPath: '',
			menuId: '',
			parentTitle: oldRouter.parentTitle,
			orderNo: oldRouter.orderNo,
			rate: oldRouter.rate,
			nodeType: oldRouter.nodeType,
			appId: oldRouter.appId,
			orgId: oldRouter.orgId,
			sourceType: oldRouter.sourceType,
		};
	} else {
		ElMessage({
			message: '请先在左边路由树中选择节点',
			type: 'warning',
		});
	}
};
const childRouterAdd = () => {
	//子级新增
	if (selectNode.value) {
		if (selectNode.value.nodeType === '1') {
			$messageBox.warning('节点类型为叶子不能添加子节点', '提示');
			return;
		}
		saveType.value = 'childAdd';

		let oldRouter = appmenuFormRef.value.selectRouter;

		let rate = oldRouter.rate;
		if (rate) {
			rate = rate + 1;
		} else {
			rate = 1;
		}
		appmenuInfo.value = {
			parentId: oldRouter.menuId,
			menuId: '',
			parentTitle: oldRouter.title,
			orderNo: null,
			rate: rate,
			appId: oldRouter.appId,
			orgId: oldRouter.orgId,
			sourceType: oldRouter.sourceType,
		};
	} else {
		ElMessage({
			message: '请先在左边路由树中选择节点',
			type: 'warning',
		});
	}
};
const deleteRouter = () => {
	//删除路由
	if (selectNode.value) {
		const params = { menuId: selectNode.value!.key };
		$api.common.send.post('appmenu0006', params).then(() => {
			appmenuTreeRef.value.remove(selectNode.value);
			selectNode.value = null;
			saveType.value = 'first';
			appmenuInfo.value = {
				menuId: '',
				parentId: null,
				orderNo: null,
				parentTitle: null,
				rate: null,
				linkPath: '',
				appId: treeQueryParams.value.appId,
			};
			ElMessage({
				message: '删除路由成功',
				type: 'success',
			});
		});
	} else {
		ElMessage({
			message: '请先在左边路由树中选择需要删除的节点',
			type: 'warning',
		});
	}
};
const clearRouterCache = () => {
	//清除路由缓存
	let menuId = null;
	if (selectNode.value) {
		menuId = selectNode.value.key;
	}
	const params = { menuId: menuId };
	$api.common.send.post('appmenu0011', params).then(() => {
		ElMessage({
			message: '清理路由缓存成功',
			type: 'success',
		});
	});
};
const addUser = () => {
	//添加用户
	appmenuUserFormRef.value.openAddUserModule();
};
const deleteUser = () => {
	//删除关联用户信息
	appmenuUserFormRef.value.deleteUser();
};
const addRole = () => {
	//添加角色
	appmenuRoleFormRef.value.openRoleModule();
};
const deleteRole = () => {
	//删除关联用户信息
	appmenuRoleFormRef.value.deleteRole();
};
const addFunc = () => {
	//添加功能
	routerFunctionFormRef.value.openFuncModule();
};
const deleteFunc = () => {
	//删除关联功能
	routerFunctionFormRef.value.delFunc();
};
// 页面加载时
</script>
<style lang="scss" scoped></style>
